<template>
  <dialogPublic
    title="电子签名"
    :show.sync="showDialog"
    @doSubmit="toUploadFiles"
    width="800px"
    @doClose="doClose"
  >
    <div class="electronic" v-if="showDialog">
      <div class="upload-file">
        <label>请核对并完善手机号</label>
      </div>
      <el-form :model="form" :rules="rules" ref="form">
        <el-table
          border
          class="electronic-table"
          :data="form.tableData"
          ref="table"
        >
          <el-table-column class="name" property="name" label="用户名">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column class="phone" property="phone" label="手机号">
            <template slot-scope="scope">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.phone'"
                :rules="rules.phone"
              >
                <el-input
                  class="phone-input"
                  v-model="scope.row.phone"
                  placeholder="请输入手机号"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div class="upload-file">
        <label>签名文档</label>
        <attach-form
          style="width: 60%"
          :accept="['pdf']"
          :limit="1"
          :title="uploadTitle"
          ref="attachForm"
        ></attach-form>
      </div>
    </div>
  </dialogPublic>
</template>
<script>
import {
  uploadFiles,
  electronicInfo,
  electronicSigns,
} from "@/api/twoTicketManagement/workTicket.js";
export default {
  props: {
    electronicForm: {
      type: Array,
      default: () => {
        return [];
      },
    },
    electronicData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      showDialog: false,
      uploadTitle: "只能上传pdf文件",
      form: {
        tableData: this.electronicForm,
      },
      rules: {
        name: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
        phone: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          { pattern: /^1[0-9]{10}$/, message: "请输入正确的手机号码" },
        ],
      },
    };
  },
  methods: {
    // 打开电子签名弹框
    openElectronicSign() {
      this.showDialog = true;
    },
    //关闭电子签名
    doClose() {
      this.showDialog = false;
    },
    // 电子签名文档上传
    async toUploadFiles() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let formData = new FormData();
          let params = {};
          let { workTicketId, title } = this.electronicData;
          let uploadFile = this.$refs.attachForm.returnFilsObj();
          if (uploadFile.files.length > 0) {
            // 已上传pdf文档
            formData.append("file", uploadFile.files[0]);
            params = Object.assign(
              { workTicketId },
              {
                fileType: "pdf",
                file: uploadFile.files[0],
                title: uploadFile.files[0].name,
              }
            );
          } else {
            // 未上传pdf文档
            params = Object.assign(
              {
                workTicketId,
                title: this.$utils.getCurrentDate(1) + "-" + title,
              },
              {
                fileType: "pdf",
              }
            );
          }
          await uploadFiles(params, formData).then(async (res) => {
            if (res.code == 200) {
              this.showDialog = false;
              this.sendElectronicSign(res.data);
            }
          });
        }
      });
    },
    // 发送电子签名信息
    async sendElectronicSign(data) {
      let { workTicketId, createName, creatorContact } = this.electronicData;
      let contact = "";
      let tenantNameForSign = "";
      let arr = this.electronicForm;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].name) {
          if (i == 0) {
            contact = arr[i].phone;
            tenantNameForSign = arr[i].name;
          } else {
            contact = contact + "," + arr[i].phone;
            tenantNameForSign = tenantNameForSign + "," + arr[i].name;
          }
        }
      }
      let list = Object.assign(
        { workTicketId, createName, creatorContact },
        {
          documentId: data,
          contact: contact,
          tenantNameForSign: tenantNameForSign,
          subject:
            this.$utils.getCurrentDate(1) + "-" + this.electronicData.title,
          sn: "workTicket",
        }
      );
      await electronicInfo(list).then(async (res) => {
        if (res.code == 200) {
          let workFlowList = [];
          let arr = this.electronicForm;
          let workFlowIdList = this.electronicData.workFlowIdList;
          let { id, status } = this.electronicData.workTicketId;
          let time = this.$utils.getCurrentDate("minutes");
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].name) {
              let obj = {
                id: workFlowIdList["workFlowId" + i],
                account: this.electronicForm[i].phone,
                name: this.electronicForm[i].name,
                type: "name" + i,
                workTicketId: id,
                status: status,
                deleteFlag: 2,
                operationTime: time,
              };
              workFlowList.push(obj);
            }
          }
          await electronicSigns(workFlowList).then((res) => {
            if (res.code == 200) {
              this.$message.success(res.description);
              this.$emit("electronicSignAfter");
            }
          });
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.electronic {
  width: 600px;
  margin: 0 auto;
  .upload-file {
    margin-left: 22px;
    text-align: left;
    display: flex;
    label {
      height: 28px;
      line-height: 28px;
      margin-right: 12px;
    }
  }
  .electronic-table {
    margin: 15px;
    /deep/ th > .cell::before {
      content: "*";
      color: #f56c6c;
      margin-right: 4px;
    }
    /deep/ th:first-child > .cell::before {
      content: "";
    }
    /deep/ th > .cell {
      text-align: center;
    }
    /deep/ .cell {
      text-align: center;
    }
    /deep/ .el-input__inner {
      height: 28px;
      line-height: 28px;
    }
    /deep/ .el-form-item__error {
      position: relative;
    }
  }
}
</style>